import React, { Component } from 'react';
import { aside, Menu, Icon } from 'antd';
import { Link } from 'react-router';
import './index.css'

const SubMenu = Menu.SubMenu;

class SideBar extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    let menuJsx = null;
    let { id, menu } = this.props;
    if (menu instanceof Array) {
      menuJsx = menu.map((itemL1) => {
        const menuL2 = itemL1.child.map((itemL2) => {
          return (
            <Menu.Item key={itemL2.key}>
              <Link to={itemL2.path}><Icon type={itemL2.icon} />{itemL2.title}</Link>
            </Menu.Item>
          );
        });
        return (
          <SubMenu key={itemL1.key} title={<span> <Icon type={itemL1.icon} />{itemL1.title}</span>}>
            {menuL2}
          </SubMenu>
        );
      });
    }

    return (
      <aside style={{zIndex:100, marginBottom:0, paddingBottom:0}} className="ant-layout-sider">
        <div className="ant-layout-logo"></div>
        <Menu mode="inline" theme="dark" defaultOpenKeys={['1','2','3']} >
          {menuJsx}
        </Menu>
      </aside>
    );
  }
}

export default SideBar;
